<template>
	<view id="map-container"></view>
</template>

<script>
	import { createApp } from 'vue';
	import AMapLoader from "@amap/amap-jsapi-loader";
	// import point from "@/static/aidex/point.png";
	window._AMapSecurityConfig = {
		securityJsCode: "055e35f6cb6c44e5b3f2a032f807bd87",
	};
	export default {
	  // ...
	  data() {
	    return {
	      map: null,
	    };
	  },
	  created() {
	    this.initMap();
	  },
	  props: {
	    list: Array,
	  },
	  watch: {
	    list: {
	      immediate: true,
	      handler(newList) {
	        if (newList && newList.length > 0 && this.map) {
				console.log("2222")
	          this.mapInit(newList);
	        }
	      },
	    },
	  },
	  methods: {
	    async initMap() {
	      try {
	        const map = await this.loadMap();
	        this.map = map; // 将地图对象赋值给this.map
	      } catch (error) {
	        console.log(error);
	      }
	    },
	    loadMap() {
	      return new Promise((resolve, reject) => {
	        AMapLoader.load({
	          key: 'babb406b66655f5e409b88d80013174a',
	          version: '2.0',
	          plugins: ['AMap.Geolocation'],
	        })
	          .then((AMap) => {
	            const map = new AMap.Map("map-container", {
	              viewMode: '2D',
	              zoom: 11,
	              center: [118.828626, 32.331596],
	              resizeEnable: true,
	            });
	            this.mapInit(this.list); 
	            resolve(map);
	          })
	          .catch((error) => {
	            reject(error);
	          });
	      });
	    },
	    mapInit(list) {
	      console.log(list);
	      list.forEach((item) => {
	        // 解析坐标
	        var coordinate = item.coordinate.split(",");
	        var longitude = parseFloat(coordinate[0]);
	        var latitude = parseFloat(coordinate[1]);
	
	        // 创建标记点
	        var marker = new AMap.Marker({
	          position: [longitude, latitude],
	          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
	          map: this.map, // 使用this.map
	        });
	
	        // 创建自定义文字
	        var text = new AMap.Text({
	          text: item.name,
	          position: [longitude, latitude],
	          offset: new AMap.Pixel(0, -30),
	          style: {
	            color: 'red',
	            fontSize: '14px',
	            fontWeight: 'bold',
	          },
	        });
	
	        // 将自定义文字添加到地图上
	        this.map.add(text); // 使用this.map
	      });
	    },
	  },
	};
</script>

<style scoped>
	#map-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>